<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>

		<!-- 订单区 -->
		<view class="myPages__mainForm">

			<view class="myPages__mainFormMain">
				<view v-for="(item,index) in salesArr" :key="index">
					<view class="myPages__mainFormMainItem" v-if="item.productType==10">
						<view class="myPages__mainFormMainItemName">{{item.productName}}</view>
						<view class="myPages__mainFormMainItemBody">
							<view class="myPages__mainFormMainItemBodyTop">
								<view @click.stop="ff_previewImage(item.productImg)"
									class="myPages__mainFormMainItemBodyTopImgBox">
									<image
										class="myPages__mainFormMainItemBodyTopImgs mymyPages__mainFormMainItemBodyTopImgs"
										:src="item.productImg">
									</image>
								</view>
								<view class="myPages__mainFormMainItemBodyBottomx">
									<p>{{item.productSku}}</p>
									<view class="myPages__mainFormMainItemBodyBottomxItems">¥{{item.price}}
										<view class="myHandbag__mainItemCenBoxJjieMainNum">
											x<span>{{item.productNum}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="partOrderProductList.length">
					<view class="myPages__mainFormMainItem">
						<view class="myPages__mainFormMainItemName">手表配件</view>
						<view class="myPages__mainFormMainItemBody">
							<view class="myPages__mainFormMainItemBodyTop" v-for="(item,index) in partOrderProductList"
								:key="index">
								<view @click.stop="ff_previewImage(item.productImg)"
									class="myPages__mainFormMainItemBodyTopImgBox">
									<image class="ssmyPages__mainFormMainItemBodyTopImgs" :src="item.productImg">
									</image>
								</view>
								<view class="myPages__mainFormMainItemBodyBottomx">
									<p>{{item.productSku}}</p>
									<view class="myPages__mainFormMainItemBodyBottomxItems">¥{{item.price}}
										<view class="myHandbag__mainItemCenBoxJjieMainNum">
											x<span>{{item.productNum}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="myPages__mainFormMainButtom">
					<view class="myPages__mainFormMainButtomText">共{{salesArr | ff_cases}}件，合计应付:</view>
					<view class="myPages__mainFormMainButtomBox">
						<span>￥</span>
						<span>{{salesArr | ff_total}}</span>
					</view>
				</view>
			</view>


		</view>

		<!-- 申请表单区 -->
		<view class="myPages__main">
			<view class="myPages__mainBody">
				<view class="myPages__mainBodyItems" @click.stop="isShow = true">
					<view class="myPages__mainBodyItemsHeard">货物状态
						<span>*</span>
					</view>
					<view class="myPages__mainBodyItemsHeardInptBodys">
						<view :class="from.name ? 'myPages__mainBodyItemsHeardInpt' : 'myPages__mainBodyItemsHeardInptAct'">{{from.name ? from.name : '请选择'}}</view>
						<image class="myPages__mainBodyItemsHeardImg" src="/static/images/myrightside.png"></image>

					</view>
				</view>
				<view class="myPages__mainBodyItems" @click.stop="causeShow = true">
					<view class="myPages__mainBodyItemsHeard">退款原因<span>*</span></view>
					<view class="myPages__mainBodyItemsHeardInptBodys">
						<view :class="from.cause ? 'myPages__mainBodyItemsHeardInpt' : 'myPages__mainBodyItemsHeardInptAct'">{{from.cause ? from.cause : '请选择'}}</view>
						<image class="myPages__mainBodyItemsHeardImg" src="/static/images/myrightside.png"></image>
					</view>
				</view>
				<view class="myPages__mainBodyItems myPages__mainBodyItemsUpload" @click.stop="">
					<view class="myPages__mainBodyItemsHeard">图片说明</view>
					<view class="myPages__mainBodyItemsHeardInptxx">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="3">
							<image class="updataImgIconImg" src="/static/images/updataImgIcon.png"></image>
						</u-upload>
					</view>

				</view>
				<view class="myPages__mainBodyItems textareaH">
					<view class="myPages__mainBodyItemsHeard myPages__mainBodyItemsHeardH">简述</view>
					<textarea :show-confirm-bar="false" placeholder="补充退款详细说明…"
					:maxlength="50"
						class="myPages__mainBodyItemsHeardInpt myPages__mainBodyItemsHeardInptH"
						v-model="from.detail"></textarea>
					<view class="saleBox__MainTextarea">
						<span>{{from.detail.length}}</span>
						<span>/50</span>
					</view>
				</view>
				<view :class="isBlur ? 'myPages__mainBodyButtom' : 'myPages__mainBodyButtom_act'" @click="send">申请售后
				</view>
			</view>
		</view>

		<!-- 货物状态 -->
		<u-overlay :show="isShow" @click="isShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">货物状态<span>(必选)</span></view>
				<image @click.stop="isShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view class="saleBox__MainItem" v-if="!(payStatus==20&&orderStatus==20)"
						@click.stop="saleClicks(10,'已收到货')">已收到货</view>
					<view class="saleBox__MainItem" @click.stop="saleClicks(30,'未收到货')">未收到货</view>
				</view>
			</view>
		</u-overlay>

		<!-- 退款原因 -->
		<u-overlay :show="causeShow" @click="causeShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">退款原因<span>(必选)</span></view>
				<image @click.stop="causeShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view class="saleBox__MainItem" v-for="(item,index) in causeArr" @click.stop="causeClicks(item)"
						:key="index">{{item.reason}}</view>
				</view>
			</view>
		</u-overlay>
		
		<!-- 删除图片-单个-->
		<u-overlay :show="isShowx" @click="isShowx = false">
			<view @click.stop="" class="warp">
				<view class="warpText">确认删除图片吗？</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="isShowx = false">取消</span>
					<span class="warpButtomYes" @click.stop="confirm">确定</span>
				</view>
			</view>
		</u-overlay>
		
		<!-- 添加成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>申请成功，等待商家同意</span>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	let that = null;
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '申请售后',
				from: {
					name: '',
					detail: '',
					cause: '',
				},
				isShow: false,
				salesArr: [],
				salesId: [],
				causeShow: false,
				causeId: [],
				causeArr: [],
				orderId: '',
				isBlur: false,
				payStatus: 0,
				orderStatus: 0,
				fileList1: [],
				partOrderProductList: [],
				isShowx: false,
				deletePicIndex: 0,
				isShowDui: false,
				limitSize: 0
			}
		},
		onLoad(oprtion) {
			console.log(oprtion)
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			console.log('oprtion--->', oprtion);
			this.payStatus = oprtion.payStatus;
			this.orderStatus = oprtion.orderStatus;
			let nowoprtion = JSON.parse(oprtion.sales)
			console.log('nowoprtion--->', nowoprtion)
			this.orderId = nowoprtion.orderId;
			this.salesArr = nowoprtion.orderProductIds;
			this.partOrderProductList = [];
			this.salesArr.forEach(item => {
				if (item.productType == 20) {
					this.partOrderProductList.push(item)
				}
			})

			this.getServiceReasonWxList();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		onShow() {
			this.getOssSignData();
			that = this
		},
		watch: {
			from: {
				handler: (val, oldval) => {

					let isBlurInput = that.blurInputs();
					if (isBlurInput) {
						that.isBlur = true;
					} else {
						that.isBlur = false;
					}
					console.log('that.isBlur-->', that.isBlur)

				},
				deep: true //对象内部的属性监听，也叫深度监听  
			}
		},
		filters: {
			ff_total(arr) {
				let total = 0;
				arr.forEach(item => {
					total = total + Number(item.totalPrice);
				});
				return total;
			},
			ff_cases(arr) {
				let cases = 0;
				arr.forEach(item => {
					cases = cases + item.productNum;
				});
				return cases;
			}
		},
		methods: {
			getOssSignData() {
				return new Promise(ress => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.$api.fileConfig().then(res => {
						
						this.limitSize = res.data.limitSize
						this.$store.commit('updataOssSignData', res.data.ossSign)
						ress();
					})
				})

			},
			confirm(){
				 this.fileList1.splice(this.deletePicIndex, 1);
				 this.isShowx = false;
			},
			// 删除图片
			deletePic(event) {
				this.isShowx = true;
				this.deletePicIndex = event.index;
			},
			// 新增图片
			async afterRead(event) {
				for(let i=0;i<event.file.length;i++){
					let item = event.file[i];
					console.log('item.size>this.limitSize--->',item.size,this.limitSize)
					if(item.size>this.limitSize){
						uni.showToast({
							icon:'none',
							title: '请上传小于5M的图片'
						})
						return 
					}
				}
				
				event.file.forEach(item => {
					this.fileList1.push(item)
				});
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			causeClicks(item) {
				this.from.cause = item.reason;
				this.causeId = item.reasonId;
				this.causeShow = false;
			},
			saleClicks(serviceType, serviceDeaice) {
				this.from.name = serviceDeaice;
				this.salesId = serviceType;
				this.isShow = false;

			},
			getServiceReasonWxList() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.serviceReasonWxList().then(res => {
					if (res.code == 200) {
						this.causeArr = res.data;
					}
				})
			},
			async imgSend() {



			},
			async send() {
				let isSend = this.blurInput();
				if (isSend) return
				let addedImageArr = []

				if (this.fileList1.length != 0) {

					for (let i = 0; i < this.fileList1.length; i++) {

						const result = await this.$upload(this.fileList1[i].url);

						let url = JSON.parse(result.data).data.url;
						addedImageArr.push(url)
					}
				}



				let orderProductIds = []
				this.salesArr.forEach(item => {
					orderProductIds.push(item.orderProductId)
				});


				let req = {
					orderId: this.orderId,
					orderProductIds,
					applyDesc: this.causeId,
					serviceType: this.salesId,
					addedDesc: this.from.detail,
					addedImageArr
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderServiceWxApplyService(req).then(res => {
					if (res.code == 200) {
						this.isShowDui=true;
						setTimeout(() => {
							this.isShowDui=false;
							uni.redirectTo({
								url: `/package/afterSaleDetails/index?serviceNo=${res.data}`
							})
						}, 1500)
					}
				})
			},
			blurInputs() {
				// console.log('this.from.name===>',this.from.name == '')
				if (this.from.name == '') {

					return false;
				}
				if (this.from.cause == '') {

					return false;
				}
				return true;

			},
			blurInput() {
				// console.log('this.from.name===>',this.from.name == '')
				if (this.from.name == '') {
					uni.showToast({
						title: "货物状态不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}
				if (this.from.cause == '') {
					uni.showToast({
						title: "退款原因不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}

			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		width: 100%;
		min-height: 100vh;
		background: #f6f7fb;
		box-sizing: border-box;

		.myPages__main {
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;
			padding-top: 0;
			padding-bottom: 48rpx;
		}

		.myPages__mainBody {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.updataImgIconImg {
			width: 140rpx;
			height: 140rpx;
		}
		.saleBox__MainTextarea {
			display: flex;
			width: 60rpx;
			height: 36rpx;
			font-size: 26rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 36rpx;
			color: #2B2B33;
			position: absolute;
			right: 32rpx;
			bottom: 18rpx;
			span:nth-child(1){
				color: #babbbd;
			}
		}

		.myPages__mainBodyItems {
			height: 88rpx;
			display: flex;
			border-bottom: 3rpx solid #F0F2F8;
			align-items: center;
			font-size: 14px;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 20px;
			color: #2B2B33;
			position: relative;

		}

		.myPages__mainBodyItemsHeardImg {
			width: 32rpx;
			height: 32rpx;
		}

		/deep/.u-upload__wrap__preview {
			border-radius: 14rpx;
			margin: 0;
			margin-right: 14rpx;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: row;
		}

		/deep/.u-upload__wrap__preview__image {
			border-radius: 28rpx;
			width: 140rpx !important;
			height: 140rpx !important;
		}

		.myPages__mainBodyItemsUpload {
			height: 220rpx;
		}

		/deep/.u-upload__button {

			margin: 0;
			margin-left: 16rpx;
		}

		.textareaH {
			flex-direction: column;
			height: 400rpx;
		}

		.myPages__mainBodyItemsHeardH {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.where {
			height: 90rpx;
			line-height: 90rpx;
			position: absolute;
			left: 157rpx;
			top: 0;
		}

		.myPages__mainBodyItemsHeardInptxx {
			flex: 3;
		}

		.myPages__mainBodyItemsHeardInptBodys {
			flex: 3;
			display: flex;
			align-items: center;
		}

		.myPages__mainBodyItemsHeard {
			flex: 1;

			span {
				color: #f0414d;
				position: relative;
				right: -1px;
				top: -4px;
				font-size: 34rpx;
				font-weight: 550;

			}
		}

		.myPages__mainBodyItemsHeardInptH {
			width: 100%;
			height: 283rpx;
			background: #F0F2F8;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			color: #000;
		}

		/deep/.u-upload__deletable {
			position: absolute;
			top: 8rpx !important;
			right: 8rpx !important;
			background-color: #f44b5b;
			height: 40rpx !important;
			width: 40rpx !important;
			display: flex;
			/* display: flex; */
			/* flex-direction: row; */
			border-radius: 50% !important;
			/* border-bottom-left-radius: 100px; */
			align-items: center;
			justify-content: center;
			z-index: 3;
		}
		/deep/.u-icon__icon{
			font-weight: bold !important;
		}

		/deep/.u-upload__deletable__icon {
			position: absolute;
			transform: scale(0.7);
			top: 54%;
			right: 50%;
			transform: translate(50%, -50%);
		}

		.myPages__mainBodyItemsHeardInpt {
			display: inline-block;
		}
		.myPages__mainBodyItemsHeardInptAct{
			color: #c1c3c7;
		}

		.myPages__mainBodyItemsCatIem {
			width: 40rpx;
			height: 40rpx;
		}
		.overlayBox {
			width: 370rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}
		
		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}
		
		.warpText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}
		
		.warpButtom {
			display: flex;
		
			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}
		
			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 蘋方-簡;
				color: #7b7d8d;
			}

		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

			span {
				font-size: 23rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #7B7D8D;
			}

		}

		.myPages__mainBodyButtom {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #F44B5B;
			color: #FFFFFF;
			opacity: 1;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			margin-top: 32rpx;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.myPages__mainBodyButtom_act {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #dedfe3;
			color: #FFFFFF;
			opacity: 1;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			margin-top: 32rpx;
		}


		.myPages__mainForm {
			width: 686rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			margin: 32rpx;
		}

		.myPages__mainFormHaerd {
			display: flex;
			justify-content: space-between;
			height: 40rpx;
			align-items: center;

			span {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #B0B1BB;
				opacity: 1;
			}

		}

		.myPages__mainFormHaerdLeft {
			display: flex;
			height: 40rpx;
			align-items: center;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMainButtomBox {
			span {
				display: inline-block;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				font-size: 32rpx;
			}

			span:nth-child(1) {
				font-size: 24rpx;
			}
		}


		.myPages__mainFormMainItem {
			width: 100%;
			background-color: #F0F2F8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

		}

		.myPages__mainFormMainItemName {
			height: 50rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 50rpx;
			color: #7B7D8D;
			opacity: 1;
			padding: 0 24rpx;
		}

		.myPages__mainFormMainItemBody {
			background: #FFFFFF;
			border: 2rpx solid #F0F2F8;
			opacity: 1;
			border-radius: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 112rpx;
			height: 112rpx;
		}


		.myPages__mainFormMainItemBodyTop {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.myPages__mainFormMainItemBodyTop:last-child {
			margin-bottom: 0 !important;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
		}

		.mymyPages__mainFormMainItemBodyTopImgs {
			transform: scale(1.5);
		}

		.ssmyPages__mainFormMainItemBodyTopImgs {
			width: 92rpx;
			height: 92rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg01 {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg02 {
			width: 56rpx;
			height: 56rpx;
		}

		.myPages__mainFormMainItemBodyTopImgBox {
			width: 136rpx;
			flex: 0 0 136rpx;
			height: 136rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f7f8fc;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myHandbag__mainItemCenBoxJjieMainNum {
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #7B7D8D;
			opacity: 1;
			line-height: 49rpx;
			text-align: center;
			display: flex;
			/* align-items: stretch; */
			margin-left: 10rpx;

			span {
				font-size: 25rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}
		}

		.myPages__mainFormMainItemBodyBottomx {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			flex: 1;

			p {
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}

			.myPages__mainFormMainItemBodyBottomxItems {
				display: flex;
				height: 44rpx;
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 44rpx;
				color: #2B2B33;
			}
		}

		.myPages__mainFormMainItemBodyBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			height: 110rpx;
		}

		.myPages__mainFormMainItemBodyBottomImgBox {
			flex: 1;
			margin-right: 34rpx;
			display: flex;
			justify-content: space-between;
		}

	}
</style>
